<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="ERP售后单号" prop="asId">
        <el-input
          v-model="queryParams.asId"
          placeholder="请输入ERP售后单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="MIS售后单号" prop="outerAsId">
        <el-input
          v-model="queryParams.outerAsId"
          placeholder="请输入MIS售后单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收退样日期" prop="receiveReturnDate">
        <el-date-picker
          clearable
          v-model="queryParams.receiveReturnDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择收退样日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="快递号" prop="trackingNumber">
        <el-input
          v-model="queryParams.trackingNumber"
          placeholder="请输入快递号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          :icon="!isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          size="mini"
          @click="shouqi"
          >展开/收起</el-button
        >
      </el-form-item>

      <div v-if="isOpen">
        <el-form-item label="快递公司" prop="courierCompany">
          <el-input
            v-model="queryParams.courierCompany"
            placeholder="请输入快递公司"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="店铺ID" prop="shopId">
          <el-input
            v-model="queryParams.shopId"
            placeholder="请输入店铺ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="主图URL" prop="imageUrl">
          <el-input
            v-model="queryParams.imageUrl"
            placeholder="请输入主图URL"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="货号" prop="productNo">
          <el-input
            v-model="queryParams.productNo"
            placeholder="请输入货号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-input
            v-model="queryParams.color"
            placeholder="请输入颜色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="尺码" prop="size">
          <el-input
            v-model="queryParams.size"
            placeholder="请输入尺码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商品编码" prop="productCode">
          <el-input
            v-model="queryParams.productCode"
            placeholder="请输入商品编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input
            v-model="queryParams.quantity"
            placeholder="请输入数量"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="认领部门" prop="department">
          <el-input
            v-model="queryParams.department"
            placeholder="请输入认领部门"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="认领人" prop="applyperson">
          <el-input
            v-model="queryParams.applyperson"
            placeholder="请输入认领人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="原是否归还" prop="isReturnedPrev">
          <el-input
            v-model="queryParams.isReturnedPrev"
            placeholder="请输入原是否归还"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="平台归属" prop="platform">
          <el-input
            v-model="queryParams.platform"
            placeholder="请输入平台归属"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="达人名称" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入达人名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="原内部单号" prop="oId">
          <el-input
            v-model="queryParams.oId"
            placeholder="请输入原内部单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="仓库处理情况" prop="warehouseHandling">
          <el-input
            v-model="queryParams.warehouseHandling"
            placeholder="请输入仓库处理情况"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="系统备注" prop="systemRemarks">
          <el-input
            v-model="queryParams.systemRemarks"
            placeholder="请输入系统备注"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="原始MIS订单号" prop="soId">
          <el-input
            v-model="queryParams.soId"
            placeholder="请输入原始MIS订单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="单品备注" prop="procodeRemarks">
          <el-input
            v-model="queryParams.procodeRemarks"
            placeholder="请输入单品备注"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </div>
      <!-- <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item> -->
    </el-form>

    <el-row :gutter="10" class="mb8" style="display: none">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['product:SampleAfterSalesOrder:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:SampleAfterSalesOrder:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:SampleAfterSalesOrder:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:SampleAfterSalesOrder:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          @click="handleApply"
          v-hasPermi="[
            'product:SampleAfterSalesOrder:uploadAftersalesNoInfoJST',
          ]"
          >申请</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          @click="handleClose"
          v-hasPermi="[
            'product:SampleAfterSalesOrder:uploadAftersalesNoInfoJST',
          ]"
          >关闭</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['product:SampleAfterSalesOrder:addByStock']"
                >新增</el-button
              >
            </el-col> -->
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['product:SampleAfterSalesOrder:edit']"
                >修改</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdateApply"
                v-hasPermi="['product:SampleAfterSalesOrder:edit']"
                >修改快递信息</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdateOwner"
                >修改退样备注</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['product:SampleAfterSalesOrder:remove']"
                >删除</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
              >
            </el-col>
          </el-row>
          <!-- v-hasPermi="['product:SampleAfterSalesOrder:export']" -->
          <!-- <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right"></el-button> -->
          <!-- @click="refreshCacheNames()" @row-dblclick="tEdit"-->
        <!-- </div>
        </el-row> -->
    <div ref="tableDom">
      <el-table
        v-loading="loading"
        :data="SampleAfterSalesOrderList"
        :maxHeight="SampleAfterSalesOrderList.length ? tableHeight : 'auto'"
        @selection-change="handleSelectionChange"
        @row-dblclick="t"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          width="100"
          label="唯一标识符"
          align="center"
          prop="id"
        />
        <el-table-column
          width="100"
          label="ERP售后单号"
          align="center"
          prop="asId"
        />
        <el-table-column
          width="100"
          label="MIS售后单号"
          align="center"
          prop="outerAsId"
        />
        <el-table-column
          width="100"
          label="退货类型"
          align="center"
          prop="returnType"
        />
        <el-table-column
          width="100"
          label="收退样日期"
          align="center"
          prop="receiveReturnDate"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.receiveReturnDate, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="售后状态"
          align="center"
          prop="applyStatus"
          width="130"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.applyStatus | state2 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="快递公司"
          align="center"
          prop="courierCompany"
        />
        <el-table-column
          width="100"
          label="快递号"
          align="center"
          prop="trackingNumber"
        />
        <el-table-column
          width="100"
          label="店铺ID"
          align="center"
          prop="shopId"
        />
        <el-table-column
          width="100"
          label="主图URL"
          align="center"
          prop="imageUrl"
        >
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="right"
              width="auto"
              v-if="scope.row.imageUrl"
            >
              <template #default>
                <img
                  :src="scope.row.imageUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                  lazy
                />
              </template>
              <template #reference>
                <img
                  :src="scope.row.imageUrl"
                  style="object-fit: contain; width: 40px; height: 40px"
                  lazy
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="货号"
          align="center"
          prop="productNo"
        />
        <el-table-column width="100" label="颜色" align="center" prop="color" />
        <el-table-column width="100" label="尺码" align="center" prop="size" />
        <el-table-column
          width="140"
          label="商品编码"
          align="center"
          prop="productCode"
        />
        <el-table-column
          width="100"
          label="数量"
          align="center"
          prop="quantity"
        />
        <el-table-column
          width="100"
          label="认领部门"
          align="center"
          prop="department"
        />
        <el-table-column
          width="100"
          label="认领人"
          align="center"
          prop="applyperson"
        />
        <el-table-column
          width="100"
          label="原是否归还"
          align="center"
          prop="isReturnedPrev"
        />
        <el-table-column
          width="100"
          label="平台归属"
          align="center"
          prop="platform"
        />
        <el-table-column
          width="100"
          label="达人名称"
          align="center"
          prop="nickName"
        />
        <el-table-column
          width="100"
          label="原内部单号"
          align="center"
          prop="oId"
        />
        <el-table-column
          width="100"
          label="仓库处理情况"
          align="center"
          prop="warehouseHandling"
        />
        <el-table-column
          width="100"
          label="系统备注"
          align="center"
          prop="systemRemarks"
        />
        <el-table-column
          width="110"
          label="原始MIS订单号"
          align="center"
          prop="soId"
        />
        <el-table-column
          width="100"
          label="单品备注"
          align="center"
          prop="procodeRemarks"
        />
        <el-table-column
          width="100"
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['product:SampleAfterSalesOrder:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['product:SampleAfterSalesOrder:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改仓库发起无信息件的售后对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      v-if="open"
    >
      <div class="el-dialog-div">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <!-- <el-col :span="12"> -->
          <!-- <el-form-item label="ERP售后单号" prop="asId">
              <el-input v-model="form.asId" placeholder="请输入ERP售后单号" />
            </el-form-item>
            <el-form-item label="MIS售后单号" prop="outerAsId">
              <el-input
                v-model="form.outerAsId"
                placeholder="请输入MIS售后单号"
              />
            </el-form-item>
            <el-form-item label="收退样日期" prop="receiveReturnDate">
              <el-date-picker
                clearable
                v-model="form.receiveReturnDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择收退样日期"
              >
              </el-date-picker>
            </el-form-item> -->
          <el-form-item label="快递公司" prop="courierCompany">
            <el-input
              v-model="form.courierCompany"
              placeholder="请输入快递公司"
            />
          </el-form-item>
          <el-form-item label="快递号" prop="trackingNumber">
            <el-input
              v-model="form.trackingNumber"
              placeholder="请输入快递号"
            />
          </el-form-item>
          <!-- <el-form-item label="店铺ID" prop="shopId">
              <el-input v-model="form.shopId" placeholder="请输入店铺ID" />
            </el-form-item>
            <el-form-item label="主图URL" prop="imageUrl">
              <el-input v-model="form.imageUrl" placeholder="请输入主图URL" />
            </el-form-item> -->

          <!-- <el-form-item label="货号" prop="productNo">
              <el-input v-model="form.productNo" placeholder="请输入货号" />
            </el-form-item>
            <el-form-item label="颜色" prop="color">
              <el-input v-model="form.color" placeholder="请输入颜色" />
            </el-form-item>
            <el-form-item label="尺码" prop="size">
              <el-input v-model="form.size" placeholder="请输入尺码" />
            </el-form-item> -->
          <el-form-item label="合作款式" prop="productNo">
            <!-- <el-input v-model="form.productNo" placeholder="请输入货号" /> -->
            <el-select
              v-model="form.productNo"
              clearable
              filterable
              remote
              :remote-method="getDatas"
              :loading="loading"
              placeholder="请选择合作款式"
              @change="testProductNo"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="颜色属性" prop="color">
            <!-- <el-input v-model="form.colorProperty" placeholder="请输入颜色属性" :loading="loading"/> -->
            <el-select
              @focus="onFocus"
              ref="selectRef"
              v-model="form.color"
              clearable
              filterable
              remote
              :remote-method="getData"
              placeholder="请选择颜色属性"
              @change="testColor"
            >
              <el-option
                v-for="item in ColorLike"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="尺寸" prop="size">
            <el-select
              @focus="onFocus"
              v-model="form.size"
              clearable
              filterable
              remote
              :remote-method="getSize"
              placeholder="请选择尺寸"
              @change="testSize"
            >
              <el-option
                v-for="item in sizeList"
                :key="item.id"
                :label="item.size"
                :value="item.size"
              >
              </el-option>
            </el-select>
            <!-- <el-select v-model="form.size" placeholder="请选择尺寸" clearable>
                <el-option v-for="dict in dict.type.sys_product_size" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select> -->
          </el-form-item>
          <el-form-item label="商品编码" prop="productCode">
            <el-input v-model="form.productCode" placeholder="请输入商品编码" />
          </el-form-item>
          <el-form-item label="数量" prop="quantity">
            <el-input v-model="form.quantity" placeholder="请输入数量" />
          </el-form-item>
          <!-- </el-col>
          <el-col :span="1"><el-form-item></el-form-item> </el-col>
          <el-col :span="11">
            <el-form-item label="认领部门" prop="department">
              <el-input
                v-model="form.department"
                placeholder="请输入认领部门"
              />
            </el-form-item>
            <el-form-item label="认领人" prop="applyperson">
              <el-input v-model="form.applyperson" placeholder="请输入认领人" />
            </el-form-item>
            <el-form-item label="原是否归还" prop="isReturnedPrev">
              <el-input
                v-model="form.isReturnedPrev"
                placeholder="请输入原是否归还"
              />
            </el-form-item>
            <el-form-item label="平台归属" prop="platform">
              <el-input v-model="form.platform" placeholder="请输入平台归属" />
            </el-form-item>
            <el-form-item label="达人名称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入达人名称" />
            </el-form-item>
            <el-form-item label="原内部单号" prop="oId">
              <el-input v-model="form.oId" placeholder="请输入原内部单号" />
            </el-form-item>
            <el-form-item label="仓库处理情况" prop="warehouseHandling">
              <el-input
                v-model="form.warehouseHandling"
                placeholder="请输入仓库处理情况"
              />
            </el-form-item>
            <el-form-item label="系统备注" prop="systemRemarks">
              <el-input
                v-model="form.systemRemarks"
                placeholder="请输入系统备注"
              />
            </el-form-item>
            <el-form-item label="原始MIS订单号" prop="soId" label-width="110px">
              <el-input v-model="form.soId" placeholder="请输入原始MIS订单号" />
            </el-form-item>
            <el-form-item label="单品备注" prop="procodeRemarks">
              <el-input
                v-model="form.procodeRemarks"
                placeholder="请输入单品备注"
              />
            </el-form-item>
          </el-col> -->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改仓库发起无信息件的售后对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openForm"
      width="1400px"
      append-to-body
    >
      <div class="el-dialog-div">
        <el-form
          :model="noticForm"
          ref="noticForm"
          label-width="20px"
          :inline="true"
          :rules="rules"
        >
          <el-card>
            <!-- <h4 style="font-weight: 800">合作款式(必填)</h4> -->
            <el-form-item
              prop="expressCompany"
              label="快递公司:"
              label-width="90px"
            >
              <!-- <el-input v-model="expressCompany"></el-input> -->
              <el-select
                v-model="expressCompany"
                placeholder="请选择快递公司"
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.sys_jst_sample_sf"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号" prop="l_id" label-width="80px">
              <el-input
                v-model="l_id"
                placeholder="请输入快递单号"
                style="width: 300px"
              />
            </el-form-item>
            <el-col :span="20">
              <el-row
                v-for="(noticItem, index) in noticForm.noticConfig"
                :key="index"
              >
                <el-col
                  :span="20"
                  v-for="nameItem in noticItem.name"
                  :key="nameItem.key"
                >
                  <el-form-item prop="productNo" label=" ">
                    <!-- <el-input v-model="nameItem.productNo"></el-input> -->
                    <el-select
                      v-model="nameItem.productNo"
                      clearable
                      filterable
                      remote
                      :remote-method="getDatas"
                      :loading="loading"
                      placeholder="合作款式"
                      @change="testProductNo"
                      style="width: 150px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="color" label=" ">
                    <!-- <el-input v-model="nameItem.color"></el-input> @focus="onFocus" remote
                :remote-method="getData"-->
                    <el-select
                      ref="selectRef"
                      v-model="nameItem.color"
                      clearable
                      filterable
                      placeholder="颜色属性"
                      @change="testColor"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in ColorLike"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="size" label=" ">
                    <!-- <el-select v-model="nameItem.size" placeholder="尺寸" clearable>
                        <el-option v-for="dict in dict.type.sys_product_size" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select> -->
                    <!-- <el-input v-model="nameItem.size"></el-input> 
                    remote
                      :remote-method="getSize"
                      @focus="onFocus"

                       @change="testSize(nameItem.size, nameItem.id)"
                    -->
                    <el-select
                      v-model="nameItem.size"
                      clearable
                      filterable
                      placeholder="尺寸"
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in sizeList"
                        :key="item.id"
                        :label="item.size"
                        :value="item.size"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="qty" label=" ">
                    <el-input
                      v-model="nameItem.qty"
                      placeholder="数量"
                      style="width: 100px"
                      type="number"
                      oninput="value=value.replace(/^0|[^0-9]/g,'')"
                      @focus="testNum()"
                    ></el-input>
                  </el-form-item>

                  <!-- <el-form-item prop="num" label="库存量:" label-width="70px">
                  

                    {{ sizeArr[nameItem.id] }}
                  </el-form-item> -->

                  <!-- <el-form-item
                    prop="isReturn"
                    label="是否归还"
                    label-width="80px"
                  >
                    
                    <el-radio-group
                      v-model="nameItem.isReturn"
                      size="small"
                      fill="#66b1ff"
                    >
                      <el-radio :label="'是'">是</el-radio>
                      <el-radio :label="'否'">否</el-radio>
                    </el-radio-group>
                  </el-form-item> -->
                </el-col>
                <!-- <el-col :span="10" v-for="(phoneItem, index) in noticItem.phone" :key="phoneItem.key">
                <el-form-item prop="phone" label="电话：">
                    <el-input v-model="phoneItem.value"></el-input>
                </el-form-item>
            </el-col> -->
                <el-col :span="4">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="addDomain(noticItem)"
                    >新增</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click.prevent="removeDomain(noticItem)"
                    >删除</el-button
                  >
                  <!-- <el-button type="primary" size="mini" @click="getinventory">查询</el-button> -->
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="4">

                <span>款式:{{ this.productNo }}<br />
                    颜色:{{ this.color }}<br />
                    尺码:{{ this.size }}<br />
                    当前库存量：{{ sizeArr.slice(-1) }}</span><br />

            </el-col> -->
          </el-card>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitlive">确 定</el-button>
        <el-button @click="resetForm" style="margin-left: 10px"
          >一键清空</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listSampleAfterSalesOrder,
  getSampleAfterSalesOrder,
  delSampleAfterSalesOrder,
  addSampleAfterSalesOrder,
  updateSampleAfterSalesOrder,
  SampleAfterSalesOrder,
  getProductCode,
} from "@/api/sample/SampleAfterSalesOrder";
import {
  listSecondry,
  getSecondry,
  delSecondry,
  addSecondry,
  updateSecondry,
  getInfoByName,
  productNoColorLike,
  listAll,
} from "@/api/product/secondry";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import {
  listSample,
  getSample,
  delSample,
  addSample,
  updateSample,
  SampleTalentFirstAdd,
  inventory,
  addByStock,
} from "@/api/sample/sample";
export default {
  name: "SampleAfterSalesOrder",
  dicts: [
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_coder",
    "sys_sample_sf",
    "sys_one_zero",
    "sys_sample_status",
    "sys_sample_name",
    "sys_sample_cj",
    "sys_jst_sample_sf",
  ],
  data() {
    return {
      trackingNumberList: [],
      //状态
      applyStatus: [],


      productNo: "",
      color: "",
      sizeArr: [],
      expressCompany: "中通快递",
      //快递单号
      l_id: "",
      //data
      noticForm: {
        noticConfig: [
          {
            name: [
              {
                // value: "",
                // phone: "",
                productNo: "",
                color: "",
                size: "",
                qty: "",

                id: 0,
                // expressCompany: "",
              },
            ],
            // phone: [
            //     {
            //         value: "",
            //     },
            // ],
          },
        ],
      },
      openForm: false,
      //模糊匹配
      sizeList: [],
      ColorLike: [],
      options: [], // 选项，从后端传递过来
      tableHeight: "",
      //搜索栏展示和收起
      isOpen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 仓库发起无信息件的售后表格数据
      SampleAfterSalesOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        asId: null,
        outerAsId: null,
        returnType: null,
        receiveReturnDate: null,
        courierCompany: null,
        trackingNumber: null,
        shopId: null,
        imageUrl: null,
        productNo: null,
        color: null,
        size: null,
        productCode: null,
        quantity: null,
        department: null,
        applyperson: null,
        isReturnedPrev: null,
        platform: null,
        nickName: null,
        oId: null,
        warehouseHandling: null,
        systemRemarks: null,
        soId: null,
        procodeRemarks: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    window.onresize = null;
  },
  filters: {
    state1(string) {
      if (string == "note") {
        return "笔记";
      }
      if (string == "live") {
        return "直播";
      }
      if (string == "VFU") {
        return "VFU";
      }
      // if (int == 2) { return "审批通过" };
    },
    /***
    一级二级增加售后状态
字段：applyStatus,状态值有3
1、待认领达人 -可以修改产品信息 status:to_match
2、待提交售后  --可修改达人信息，不能修改产品信息status:to_apply
3、已售后  --不可修改任意信息status:applyed 
    ** */
    state2(string) {
      if (string == "to_match") {
        return "待认领达人";
      }
      if (string == "to_apply") {
        return "待提交售后";
      }
      if (string == "applyed") {
        return "已售后";
      }
    },
  },
  methods: {
    // 新增
    removeDomain(item) {
      var index = this.noticForm.noticConfig.indexOf(item);
      if (index == "0") {
        // 还有一个的时候提示不能删除
        this.$message({
          message: "不能删除了",
          type: "error",
        });
        return false;
      }
      if (index !== -1 && index !== "0") {
        this.noticForm.noticConfig.splice(index, 1);
      }
    },
    // 表单新增
    addDomain(item) {
      var m = item.name[0];
      if (!m.productNo) {
        this.$modal.msgError("请选择款式");
        return;
      }
      if (!m.color) {
        this.$modal.msgError("请选择颜色");
        return;
      }
      if (!m.size) {
        this.$modal.msgError("请选择尺寸");
        return;
      }
      if (!m.qty) {
        this.$modal.msgError("请输入数量");
        return;
      }
      this.noticForm.noticConfig.push({
        name: [
          {
            // value: "",

            // phone: "",
            productNo: "",
            color: "",
            size: "",
            qty: "",

            id: this.count++,
            // num: "",
            // expressCompany: "",
            key: Date.now(),
          },
        ],
        // phone: [
        //     {
        //         value: "",
        //         key: Date.now() + "2",
        //     },
        // ],
      });
    },
    getinventory() {
      inventory({
        productNo: this.productNo,
        colorProperity: this.color,
        size: this.form.size,
      }).then((res) => {
        // console.log(JSON.stringify(res.data));
        if (res.code == 200) {
          this.num = res.data[0].virtual_qty;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    testNum(index) {
      // this.num = JSON.parse(localStorage.getItem("num"))
    },
    testSize(key, index) {
      console.log(JSON.stringify(key));
      this.size = key;
      // console.log(this.count);
      console.log(index);
      getProductCode({
        productNo: this.form.productNo,
        colorProperity: this.form.color,
        size: this.form.size,
      }).then((res) => {
        // if (res) {
        console.log(JSON.stringify(res));
        if (res.productCode) {
          this.form.productCode = res.productCode;
          this.$modal.msgSuccess("已更新商品编码");
        }

        // if (res.data.length > 0) {
        //   this.sizeArr[index] = res.data[0].publicCanUseNum;
        //   console.log(JSON.stringify(this.sizeArr[index]));
        //   console.log(JSON.stringify(this.sizeArr));
        //   this.$forceUpdate();
        // } else {
        //   this.$modal.msgError("该商品编码聚水潭不存在，请核对。");
        // }
        // } else {
        //   this.$modal.msgError(res.msg);
        // }
      });
    },
    /* 获取尺寸列表 */
    testColor(key) {
      this.color = key;
      this.form.size = "";
      listAll({ productNo: this.productNo, colorProperty: key }).then((res) => {
        // this.loading = false;
        this.sizeList = res;
        console.log(JSON.stringify(res));
      });
    },
    /* 获取颜色列表 */
    testProductNo(key) {
      this.productNo = key;
      this.form.color = "";
      this.form.size = "";
      console.log();
      productNoColorLike({ productNo: key }).then((res) => {
        // this.loading = false;
        this.ColorLike = res.data;
        console.log(JSON.stringify(this.ColorLike));
      });
    },

    // /* 获取货号列表 */
    // getDatas(key) {
    //   console.log(JSON.stringify(key));
    //   this.loading = true;
    //   // return
    //   productNoLike(key).then((res) => {
    //     this.loading = false;
    //     this.options = res.data;
    //     console.log(JSON.stringify(this.options));
    //   });
    // },
    //修改对话框
    //添加颜色列表获得焦点
    onFocus() {
      this.getData();

      this.getSize();
      // if (!this.form.colorProperty) {
      //     this.$selectRef.value.blur() //就是这一句，
      // }
    },

    //修改对话框
    /* 获取尺寸列表 */
    getSize(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      listAll({
        productNo: this.form.productNo,
        colorProperty: this.form.color,
      }).then((res) => {
        // this.loading = false;
        this.sizeList = res;
        console.log(JSON.stringify(res));
      });
    },
    /* 获取颜色列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      productNoColorLike({ productNo: this.form.productNo, color: key }).then(
        (res) => {
          // this.loading = false;
          this.ColorLike = res.data;
          console.log(JSON.stringify(this.ColorLike));
        }
      );
    },

    /* 获取货号列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },
    //申请按钮
    handleApply() {
      if (!this.ids.length < 0) {
        this.$modal.msgError("请选择一条记录");
        return;
      }
      SampleAfterSalesOrder({ ids: this.ids, status: 1 }).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("申请成功！");
        } else {
          this.$modal.msgError("申请失败");
        }
      });
    },
    //关闭按钮
    handleClose() {
      if (!this.ids.length < 0) {
        this.$modal.msgError("请选择一条记录");
        return;
      }
      SampleAfterSalesOrder({ ids: this.ids, status: 0 }).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("关闭成功！");
        } else {
          this.$modal.msgError("关闭失败");
        }
      });
    },
    //搜索栏展示与收起
    shouqi() {
      this.isOpen = !this.isOpen;
    },
    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.handleUpdate(row);
    },
    /** 查询仓库发起无信息件的售后列表 */
    getList() {
      this.loading = true;
      listSampleAfterSalesOrder(this.queryParams).then((response) => {
        this.SampleAfterSalesOrderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        asId: null,
        outerAsId: null,
        returnType: null,
        receiveReturnDate: null,
        courierCompany: null,
        trackingNumber: null,
        shopId: null,
        imageUrl: null,
        productNo: null,
        color: null,
        size: null,
        productCode: null,
        quantity: null,
        department: null,
        applyperson: null,
        isReturnedPrev: null,
        platform: null,
        nickName: null,
        oId: null,
        warehouseHandling: null,
        systemRemarks: null,
        soId: null,
        procodeRemarks: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;

      this.trackingNumberList = selection.map((item) => item.trackingNumber);
      this.applyStatus = selection.map((item) => item.applyStatus);
      console.log(JSON.stringify(this.trackingNumberList));
      console.log(JSON.stringify(this.applyStatus));
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openForm = true;
      this.title = "添加仓库发起无信息件的售后";
    },
    submitlive() {
      // == 'live'
      console.log(this.sampleTalentCooperateType);
      // if (!this.sampleTalentCooperateType.includes('live')) {
      //     this.$modal.msgError('请选择直播类型')
      //     return
      // }
      // return
      console.log(JSON.stringify(this.noticForm.noticConfig));

      // this.noticForm.noticConfig.forEach(item => {
      //     note.push(item.name)
      // })
      var apply = this.noticForm.noticConfig.map((item) => item.name[0]);
      var live = [];
      apply.forEach((item) => {
        live.push({ ...item });
      });

      console.log(JSON.stringify(live));
      // return;
      var liveList = {
        // sampleTalentCooperateType: "live",
        logistics_company: this.expressCompany,
        l_id: this.l_id,
        items: live,
      };
      if (!liveList.items[0].productNo) {
        this.$modal.msgError("请选择款式");
        return;
      }
      // if (!liveList.items[0].color) {

      //     this.$modal.msgError('请选择颜色')
      //     return
      // }
      // if (!liveList.items[0].size) {

      //     this.$modal.msgError('请选择尺寸')
      //     return
      // }
      // if (!liveList.items[0].qty) {

      //     this.$modal.msgError('请输入数量')
      //     return
      // }

      if (liveList.items[1]) {
        if (!liveList.items[1].productNo) {
          this.$modal.msgError("请选择第二个款式");
          return;
        }
      }

      // return
      console.log(JSON.stringify(liveList));
      addByStock(liveList).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.openForm = false;
          this.$modal.msgSuccess("操作完成");
          // this.data = {};
          // window.location.reload();
          //清空数据
          this.resetForm();

          // location.reload();
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    resetForm() {
      this.l_id = "";
      this.noticForm = {
        noticConfig: [
          {
            name: [
              {
                productNo: "",
                color: "",
                size: "",
                qty: "",

                id: 0,
              },
            ],
          },
        ],
      };
    },
    cancelForm() {
      this.openForm = false;
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getSampleAfterSalesOrder(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改仓库发起无信息件的售后";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateSampleAfterSalesOrder(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSampleAfterSalesOrder(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
       if (this.applyStatus.indexOf("applyed") > -1) {
        // this.isStock = false;
        this.$modal.msgError("所选订单包含已售后状态");
        return;
      }
      const ids = row.id || this.ids;
      this.$modal
        .confirm(
          '是否确认删除仓库发起无信息件的售后编号为"' + ids + '"的数据项？'
        )
        .then(function () {
          return delSampleAfterSalesOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/SampleAfterSalesOrder/export",
        {
          ...this.queryParams,
        },
        `SampleAfterSalesOrder_${new Date().getTime()}.xlsx`
      );
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },
    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow-x: hidden;
}
</style>